<template>
  <div class="login">
    <el-form ref="formRef" :model="form" :rules="rules">
      <h3>iHRM后台登录系统</h3>
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" prefix-icon="el-icon-user-solid" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn" @click="login">登录</el-button>
      </el-form-item>
      <el-form-item>
        <div class="div1">还没有账号?立即登录</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { loginApi } from '@/api/user.js'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      form: {
        mobile: '',
        password: ''
      },
      rules: {
        mobile: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
              reg.test(value) ? callback() : callback(new Error('手机号不合法'))
            }
          }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 3, max: 6, message: '密码长度为3~6位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions({
      vuexLogin: 'user/login'
    }),
    // 点击登录
    login() {
      this.$refs.formRef.validate(async result => {
        // if (!result) return this.$message.error('登录失败')
        // const res = await loginApi(this.form)
        // await this.vuexLogin(this.form)
        // this.$message.success('登陆成功')
        // this.$router.push('/')
        // if (res.data.code === 10000) location.href = '/dashboard'
        if (result) {
          try {
            await this.vuexLogin(this.form)
            // 重登录,跳转之前页面
            const _redirect = this.$route.query._redirect
            if (_redirect) {
              this.$router.push(_redirect)
            } else {
              this.$router.push('/')
            }
          } catch (err) {
            console.log(err.message)
          }
        } else {
          console.log('校验失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  background-image: url('../../assets/common/login.jpg');
  height: 100%;
  background-position: center;
  .el-form {
    width: 500px;
    height: 430px;
    padding: 30px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    h3 {
      text-align: center;
      font-size: 30px;
      font-weight: 200;
      letter-spacing: 14px; //设置文字间隔
    }
    ::v-deep .el-form-item__error {
      color: #fff;
    }
    ::v-deep input.el-input__inner {
      height: 52px;
    }
    .btn {
      width: 100%;
      height: 46px;
      font-size: 20px;
      letter-spacing: 6px;
      // background-color: #407ffe;
    }
    .div1 {
      font-size: 14px;
      color: #fff;
      float: right;
    }
  }
}
</style>
